<template>
    <!--历史点位-->
    <section class="section">
        <div>
            <mt-header title="历史记录" class="header">
                <span slot="left">
                    <mt-button icon="back" @click="$router.back()"></mt-button>
                </span>
            </mt-header>
        </div>
        <mu-expansion-panel :expand="true" v-for="(item,index) in detialData" :key="index">
            <div slot="header" style="font-size: 0.1rem" >
                <div style="padding:0.12rem 0;">
                    <span>点位测量结果 </span><span>{{item.prop == '100'?'合格':'不合格'}}</span>
                    <span>操做人：{{item.createdUserName || '--'}}</span>
                </div>
                <p>{{'2019-9-20'}}</p>
            </div>
            <section class="content">
                <div class="con">
                    <ul>
                        <li style="display:block;" v-for="(list,index) in item.typeList" :key="index">
                            <p><span>{{list}}：</span></p>
                            <section class="table">
                                <table border="1" bordercolor="#D9D9D9" class="table">
                                    <thead>
                                    <tr>
                                        <th>实测内容</th>
                                        <th>测量数据</th>
                                        <th>测量结果</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(item,sql) in handtype(list,item.messageList)" :key="sql">
                                            <td>{{item.content}}</td>
                                            <td>{{item.value}}</td>
                                            <td>{{item.result==1?'合格':'不合格'}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </section>
                        </li>
                    </ul>
                   
                    <ul>
                        <li><span>参与人</span><span>{{item.createdUserName || '--'}}</span></li>
                        <li><span>抄送至</span><span>{{item.copyUserName || '--'}}</span></li>
                    </ul>
                </div>
            </section>
        </mu-expansion-panel>
    </section>
</template>

<script>
    export default {
        name: "historyTask",
        data () {
            return{
                params:{},
                detialData:[]
            }
        },
        created () {
            this.params = JSON.parse(sessionStorage.getItem("point"))
            let obj = {taskId:this.params.taskId,point:this.params.point,areaId:this.params.areaId}
            this.getDetail(obj)
        },
        methods: {
             //获取历史记录
            getDetail(obj){
                this.$A.Go('post','/safety/measure/getPointHistory',obj).then(success=>{
                    if(success.code == 200){
                        this.detialData = success.body || [];
                        // this.pointList = this.handPoint(success.body.point)
                        // this.mapurl = success.body.photoUrl  typeList
                        // let arr = success.body.messageList || []
                        
                        for(let i=0;i<this.detialData.length;i++){
                            let typeList = [];
                            for(let j=0;j<this.detialData[i].messageList.length;j++){
                                let str = this.detialData[i].messageList[j]['subentryName']
                                if(!typeList.includes(str)){
                                    typeList.push(str)
                                }
                            }
                            this.detialData[i]['typeList'] = typeList
                        }
                        // console.log(this.typeList)
                    }else{
                        this.$A.MS(success.msg,'error')
                    }
                    
                },function(err){
                    console.log(err)
                })
            },
            handtype(str,data=[]){
                return data.filter(o=>o.subentryName == str)
            },
        }
    }
</script>

<style scoped lang="scss">
    .section {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;
        .content {
            flex: 1;
            overflow: auto;
            padding: 0.1rem 0;
            .con {
                display: flex;
                flex-direction: column;
                padding: 0.1rem;
                .table {
                    width: 100%;
                    height: auto;
                    border: 0.01rem solid #6E6E6E;
                    font-size: 0.12rem;
                    line-height: 0.2rem;
                    .tr {
                        width: 100%;
                        border-bottom: 0.01rem solid #6E6E6E;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .td {
                            border-left: 1px solid #dedede;
                            width: 100%;
                            text-align: center;
                            .tr {
                                border-bottom: 1px solid #dedede;
                                border-left: none;
                            }
                            > .tr:last-child {
                                border: none;
                            }
                        }
                        > .td:first-child {
                            border: none;
                        }
                        .tr {
                            border-left: 1px solid #dedede;
                        }
                    }
                    > .tr:last-child {
                        border: none;
                    }
                    .header {
                        background-color: #ddd;
                        color: #000;
                    }
                    .subheader {
                        background-color: #eee;
                        color: #333;
                    }
                }
                ul {
                    background: white;
                    width: 100%;
                    height: 100%;
                    list-style: none;
                    padding: 0.12rem;
                    margin: 0.01rem 0;
                    overflow: hidden;
                    font-size: 0.12rem;
                    li {
                        display: flex;
                        justify-content: space-between;
                        padding: 0.1rem 0;
                    }
                }
            }
        }
    }
</style>
